---
title: Item de Menu
image: /images/user-guide/kanban-views/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

Um item de menu versátil projetado para ser usado em um menu ou lista de navegação.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props         | Tipo                                     | Descrição                                                                                                                             |
| ------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| ÍconeEsquerdo | ComponenteÍcone                          | Um ícone esquerdo opcional exibido antes do texto no item de menu                                                                     |
| realce        | Nome opcional para estilização adicional | Especifica a cor de destaque do item de menu. As opções incluem: `default`, `danger`, e `placeholder` |
| texto         | Nome opcional para estilização adicional | O conteúdo textual do item de menu                                                                                                    |
| iconButtons   | matriz                                   | Um array de objetos representando botões de ícones adicionais associados ao item de menu                                              |
| isTooltipOpen | booleano                                 | Controla a visibilidade da dica de ferramenta associada ao item de menu                                                               |
| testId        | Nome opcional para estilização adicional | O atributo data-testid para fins de teste                                                                                             |
| onClick       | funções                                  | Função de retorno de chamada acionada quando o item de menu é clicado                                                                 |
| className     | Nome opcional para estilização adicional | Nome opcional para estilização adicional                                                                                              |

</Tab>
</Tabs>

## Variantes

As diferentes variantes do componente de item de menu incluem o seguinte:

### Comando

Um item de menu estilo comando em um menu para indicar atalhos de teclado.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props         | Tipo                                     | Descrição                                                             |
| ------------- | ---------------------------------------- | --------------------------------------------------------------------- |
| ÍconeEsquerdo | ComponenteÍcone                          | Um ícone esquerdo opcional exibido antes do texto no item de menu     |
| texto         | Nome opcional para estilização adicional | O conteúdo textual do item de menu                                    |
| firstHotKey   | Nome opcional para estilização adicional | O primeiro atalho de teclado associado ao comando                     |
| secondHotKey  | Nome opcional para estilização adicional | O segundo atalho de teclado associado ao comando                      |
| isSelected    | booleano                                 | Indica se o item de menu está selecionado ou destacado                |
| aoClicar      | função                                   | Função de retorno de chamada acionada quando o item de menu é clicado |
| className     | Nome opcional para estilização adicional | Nome opcional para estilização adicional                              |

</Tab>
</Tabs>

### Arrastável

Um componente de item de menu arrastável projetado para ser usado em um menu ou lista onde os itens podem ser arrastados e ações adicionais podem ser realizadas através de botões de ícones.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props          | Tipo                                     | Descrição                                                                                                   |
| -------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| ÍconeEsquerdo  | ComponenteÍcone                          | Um ícone esquerdo opcional exibido antes do texto no item de menu                                           |
| realce         | Nome opcional para estilização adicional | Especifica a cor de destaque do item de menu. Pode ser `default`, `placeholder`, e `danger` |
| iconButtons    | matriz                                   | Um array de objetos representando botões de ícones adicionais associados ao item de menu                    |
| isTooltipOpen  | booleano                                 | Controla a visibilidade da dica de ferramenta associada ao item de menu                                     |
| onClick        | funções                                  | Função de retorno de chamada acionada quando o link é clicado                                               |
| texto          | Nome opcional para estilização adicional | O conteúdo textual do item de menu                                                                          |
| isDragDisabled | booleano                                 | Indica se o arrasto está desativado                                                                         |
| className      | Nome opcional para estilização adicional | Nome opcional para estilização adicional                                                                    |

</Tab>
</Tabs>

### Seleção Múltipla

Fornece uma maneira de implementar funcionalidade de multi-seleção com uma caixa de seleção associada.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props          | Tipo                                     | Descrição                                                                      |
| -------------- | ---------------------------------------- | ------------------------------------------------------------------------------ |
| ÍconeEsquerdo  | ComponenteÍcone                          | Um ícone esquerdo opcional exibido antes do texto no item de menu              |
| texto          | Nome opcional para estilização adicional | O conteúdo textual do item de menu                                             |
| selecionado    | booleano                                 | Indica se o item do menu está selecionado (marcado)         |
| onSelectChange | funções                                  | Função de retorno de chamada acionada quando o estado da caixa de seleção muda |
| className      | Nome opcional para estilização adicional | Nome opcional para estilização adicional                                       |

</Tab>
</Tabs>

### Avatar de Seleção Múltipla

Um item de menu de multi-seleção com um avatar, uma caixa de seleção para seleção e conteúdo textual.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props          | Tipo                                     | Descrição                                                                      |
| -------------- | ---------------------------------------- | ------------------------------------------------------------------------------ |
| avatar         | `ReactNode`                              | O avatar ou ícone a ser exibido no lado esquerdo do item do menu               |
| texto          | Nome opcional para estilização adicional | O conteúdo textual do item de menu                                             |
| selecionado    | booleano                                 | Indica se o item do menu está selecionado (marcado)         |
| onSelectChange | funções                                  | Função de retorno de chamada acionada quando o estado da caixa de seleção muda |
| className      | Nome opcional para estilização adicional | Nome opcional para estilização adicional                                       |

</Tab>
</Tabs>

### Navegar

Um item de menu contendo um ícone opcional à esquerda, conteúdo textual e um ícone de chevron à direita.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props         | Tipo                                     | Descrição                                                             |
| ------------- | ---------------------------------------- | --------------------------------------------------------------------- |
| ÍconeEsquerdo | ComponenteÍcone                          | Um ícone esquerdo opcional exibido antes do texto no item de menu     |
| texto         | Nome opcional para estilização adicional | O conteúdo textual do item de menu                                    |
| onClick       | funções                                  | Função de retorno de chamada acionada quando o item de menu é clicado |
| className     | Nome opcional para estilização adicional | Nome opcional para estilização adicional                              |

</Tab>
</Tabs>

### Selecionar

Um item de menu selecionável, com opção de conteúdo à esquerda (ícone e texto) e um indicador (ícone de seleção) para o estado selecionado.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props         | Tipo                                     | Descrição                                                              |
| ------------- | ---------------------------------------- | ---------------------------------------------------------------------- |
| ÍconeEsquerdo | ComponenteÍcone                          | Um ícone esquerdo opcional exibido antes do texto no item de menu      |
| texto         | Nome opcional para estilização adicional | O conteúdo textual do item de menu                                     |
| selected      | booleano                                 | Indica se o item do menu está selecionado (marcado) |
| desativado    | booleano                                 | Indica se o item do menu está desativado                               |
| em destaque   | booleano                                 | Indica se o item do menu está atualmente em destaque com o mouse       |
| onClick       | função                                   | Função de retorno de chamada acionada quando o item de menu é clicado  |
| className     | Nome opcional para estilização adicional | Nome opcional para estilização adicional                               |

</Tab>
</Tabs>

### Avatar de Seleção

Um item de menu selecionável com um avatar, apresentando conteúdo opcional à esquerda (avatar e texto) e um indicador (ícone de seleção) para o estado selecionado.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| Props       | Tipo                                     | Descrição                                                              |
| ----------- | ---------------------------------------- | ---------------------------------------------------------------------- |
| avatar      | `ReactNode`                              | O avatar ou ícone a ser exibido no lado esquerdo do item do menu       |
| texto       | Nome opcional para estilização adicional | O conteúdo textual do item de menu                                     |
| selected    | booleano                                 | Indica se o item do menu está selecionado (marcado) |
| desativado  | booleano                                 | Indica se o item do menu está desativado                               |
| em destaque | booleano                                 | Indica se o item do menu está atualmente em destaque com o mouse       |
| testId      | Nome opcional para estilização adicional | O atributo data-testid para fins de teste                              |
| aoClicar    | função                                   | Função de retorno de chamada acionada quando o item de menu é clicado  |
| className   | Nome opcional para estilização adicional | Nome opcional para estilização adicional                               |

</Tab>
</Tabs>

### Selecionar Cor

Um item de menu selecionável com uma amostra de cor para cenários onde você deseja que os usuários escolham uma cor a partir de um menu.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props       | Tipo                                     | Descrição                                                                                                                                                                                                        |
| ----------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| cor         | Nome opcional para estilização adicional | A cor do tema a ser exibida como uma amostra no item do menu. As opções incluem: `verde`, `turquesa`, `céu`, `azul`, `roxo`, `rosa`, `vermelho`, `laranja`, `amarelo`, e `cinza` |
| selecionado | booleano                                 | Indica se o item do menu está selecionado (marcado)                                                                                                                                           |
| desativado  | booleano                                 | Indica se o item do menu está desativado                                                                                                                                                                         |
| em destaque | booleano                                 | Indica se o item do menu está atualmente em destaque com o mouse                                                                                                                                                 |
| variante    | Nome opcional para estilização adicional | A variante da amostra de cor. Pode ser `default` ou `pipeline`                                                                                                                                   |
| onClick     | função                                   | Função de retorno de chamada acionada quando o item de menu é clicado                                                                                                                                            |
| className   | Nome opcional para estilização adicional | Nome opcional para estilização adicional                                                                                                                                                                         |

</Tab>
</Tabs>

### Alternar

Um item de menu com um interruptor associado para permitir que os usuários ativem ou desativem um recurso específico

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props           | Tipo                                     | Descrição                                                                  |
| --------------- | ---------------------------------------- | -------------------------------------------------------------------------- |
| ÍconeEsquerdo   | ComponenteÍcone                          | Um ícone esquerdo opcional exibido antes do texto no item de menu          |
| texto           | Nome opcional para estilização adicional | O conteúdo textual do item de menu                                         |
| alternado       | booleano                                 | Indica se o interruptor está na posição "ligado" ou "desligado"            |
| onToggleChange  | funções                                  | Função de retorno de chamada acionada quando o estado do interruptor muda  |
| alternarTamanho | Nome opcional para estilização adicional | O tamanho do interruptor de alternância. Pode ser tanto \ |
| className       | Nome opcional para estilização adicional | Nome opcional para estilização adicional                                   |

</Tab>
</Tabs>
